<template>
	<view class="page">
		<!-- <view class="group_2">
			<view class="d-flex flex-row align-center justify-center" style="height: 300rpx;background-color: #6a8cd9;">
				<view class="d-flex flex-column align-center justify-center">
					<view class="">
						<u-upload :fileList="fileList1" name="1" width="80rpx" height="80rpx" @afterRead="afterRead"
							@delete="deletePic" multiple :maxCount="1" />
					</view>
					<view class=""
						style="width: 160rpx;height: 50rpx;background: #d9ae2b;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 25rpx;margin-right: 20rpx;line-height: 50rpx;">
						人脸未同步
					</view>
				</view>
			</view>

		</view> -->
		<view class="group_3">
			<u-cell-group>
				<u-cell :border="false">
					<view slot="title" class="u-cell__title ">头像</view>
					<view slot="value">
						<u-upload :fileList="fileList1" name="1" width="80rpx" height="80rpx" @afterRead="afterRead"
							@delete="deletePic" multiple :maxCount="1" />
					</view>
				</u-cell>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title required">姓名</view>
						<input type="text" placeholder="请输入姓名" class="catname" v-model="username" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title required">性别</view>
						<view style="margin-top: 36rpx;">
							<u-radio-group v-model="userInfo.insurance" @change="groupChange" labelSize="10">
								<u-radio label="男" name="男" activeColor="#ec652b" />
								<u-radio label="女" name="女" customStyle="margin-left: 60rpx;" activeColor="#ec652b" />
							</u-radio-group>
						</view>
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title">出生</view>
						<input type="text" placeholder="请输入出生" disabled v-model="userInfo.datatime" @click="show = true"
							class="catname" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title required">手机号</view>
						<input type="number" placeholder="请输入手机号" class="catname" v-model="phone" maxlength="11"
							v-if="addlist != 2" />
						<input type="number" placeholder="请输入手机号" class="catname" v-model="phone" maxlength="11" v-else
							disabled />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title">身份证号</view>
						<input type="idcard" placeholder="请输入身份证号" class="catname" v-model="card_num" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title">等级</view>
						<input type="text" placeholder="请选择等级" disabled v-model="userInfo.occupation_jineng"
							@click="showjineng = true" class="catname" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title required">场馆</view>
						<input type="text" placeholder="请选择场馆" disabled v-model="userInfo.occupation_changguan"
							@click="showchangguan = true" class="catname" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title required">小程序</view>
						<input type="text" placeholder="请选择小程序" disabled v-model="userInfo.occupation_xcx"
							@click="showxcx = true" class="catname" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title">地址</view>
						<input type="text" placeholder="请输入地址" class="catname" v-model="base_address" />
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title">备注</view>
						<input type="text" placeholder="请输入备注" class="catname" v-model="remark" />
						<!-- <u-textarea v-model="remark" placeholder="请输入备注" maxlength='-1'></u-textarea> -->
					</view>
				</view>
				<view class='line'></view>
				<view class='ul'>
					<view class='li'>
						<view slot="title" class="u-cell__title">同步注册人脸</view>
						<view class="" style="display: flex; align-items: center;">
							<!-- <van-checkbox v-model="reg_face" @change='checkboxChange'></van-checkbox> -->
					<!-- 		<van-checkbox v-model="checked" @click="checkboxChange">复选框</van-checkbox> -->
						<u-checkbox shape='circle' :checked="reg_face"  @change='checkboxChange'>选中</u-checkbox>
						</view>
				
					</view>
				</view>
				<view class='line'></view>
			</u-cell-group>
			<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="timelist" :minDate="-845628841"
				:maxDate="2856778555000" @cancel="show = false"></u-datetime-picker>
			<u-picker :show="showjineng" :columns="jineng_status" keyName="name" @confirm="addjineng"
				@cancel="showjineng = false">
			</u-picker>
			<u-picker :show="showchangguan" :columns="changguan_status" keyName="venue_name" @confirm="addchangguan"
				@cancel="showchangguan = false">
			</u-picker>
			<u-picker :show="showxcx" :columns="xcx_status" keyName="name" @confirm="addxcx" @cancel="showxcx = false">
			</u-picker>
			<view class="" style="width: 100%;height: 10vh;"></view>
		</view>
		<!-- <button bindtap="onClick" class="button_3">
			保存
		</button> -->
		<view class="d-flex flex-row justify-space-between justify-center align-center" v-if="addlist == 1"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class="" @click="onClick"
				style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
				border-radius: 80rpx 80rpx;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				保存
			</view>
		</view>
		<view class="d-flex flex-row justify-space-between justify-center align-center" v-if="addlist == 2"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class="" @click="on_Click"
				style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
				border-radius: 80rpx 80rpx;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				fileList1: [],
				url_phone: '',
				fileList: [], //图片列表
				show: false,
				value1: Number(new Date()),
				showoccupation: false, //职业
				occupation_status: [], //职业
				showjineng: false, //技能等级
				jineng_status: [], //技能等级
				showchangguan: false, //所属场馆
				changguan_status: [], //所属场馆
				showxcx: false, //关联小程序
				xcx_status: [], //关联小程序
				occupation_list: [],
				jineng_list: [],
				changguan_list: [],
				xcx_list: [],
				userInfo: {
					occupation_relation: '',
					occupation_relation_id: '',
					occupation_jineng: '',
					occupation_jineng_id: '',
					occupation_changguan: "",
					occupation_changguan_id: "",
					occupation_xcx: '',
					occupation_xcx_id: '',
					insurance: '',
					datatime: '',
				},
				appletList: [],
				userLevelList: [],
				username: "",
				base_sex: "",
				phone: "",
				card_num: "",
				base_address: "",
				remark: "",
				addlist: '',
				id: '',
				old_venue: '',
				reg_face:false,
				regface:'',
				checked:true
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			this.id = options.id
			this.venue_id = options.venue_id
			this.addlist = options.add
			if (options.add == 2) {
				this.userdetail(options.id)
			}
			// this.shuju()
			this.confall()
		},
		methods: {
			checkboxChange(event) {
				console.log('复选框的值发生变化：', event);
				 this.reg_face = event?1:0; 
			},
			
			async userdetail(id) {
				let that = this
				let params = {
					output: 'json',
					user_id: id,
					venue_id: this.venue_id
				};
				let res = await venues.userdetail(params);
				if (res.code === 1) {
					let selectionArrs = res.data
					this.username = selectionArrs.username
					this.userInfo.insurance = selectionArrs.base_sex
					this.phone = selectionArrs.phone
					this.card_num = selectionArrs.card_num
					this.userInfo.datatime = selectionArrs.base_birthday
					this.userInfo.occupation_jineng = selectionArrs.vip_name
					this.userInfo.occupation_changguan = selectionArrs.applet.name
					this.userInfo.occupation_xcx = selectionArrs.venueRelation[0].venue.venue_name
					this.base_address = selectionArrs.base_address
					this.remark = selectionArrs.remark
					this.fileList1 = [{
						url: selectionArrs.head_pic
					}]
					console.log(this.fileList1, 'this.fileList1')
					this.userInfo.occupation_jineng_id = selectionArrs.vip_id
					this.userInfo.occupation_changguan_id = selectionArrs.venue_id
					this.userInfo.occupation_xcx_id = selectionArrs.applet_id
					this.old_venue = selectionArrs.venue_id
					this.base_sex = selectionArrs.base_sex
					this.url_phone = selectionArrs.head_pic
					if(selectionArrs.reg_face == 1){
						this.reg_face = true
					} else {
						this.reg_face = false
					}
				}
			},
			async confall() {
				let that = this
				let params = {
					output: 'json'
				};
				let res = await venues.confall(params);
				if (res.code === 1) {
					this.userInfo.occupation_jineng = res.data.userLevelList[0].name
					this.userInfo.occupation_jineng_id = res.data.userLevelList[0].id
					this.userInfo.occupation_changguan = res.data.venueList[0].venue_name
					this.userInfo.occupation_changguan_id = res.data.venueList[0].id
					this.userInfo.occupation_xcx = res.data.appletList[0].name
					this.userInfo.occupation_xcx_id = res.data.appletList[0].id
					this.jineng_status.push(
						res.data.userLevelList
					)
					this.changguan_status.push(
						res.data.venueList
					)
					this.xcx_status.push(
						res.data.appletList
					)
				}
			},

			async onClick() {
				let that = this
				
				if (!that.username) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!that.base_sex) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return
				}
				if (!that.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.occupation_changguan_id) {
					uni.showToast({
						title: '请选择场馆',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.occupation_xcx_id) {
					uni.showToast({
						title: '请选择小程序',
						icon: 'none'
					})
					return
				}
				let row = {
					username: this.username,
					base_sex: this.base_sex,
					phone: this.phone,
					card_num: this.card_num,
					base_birthday: this.userInfo.datatime,
					vip_id: this.userInfo.occupation_jineng_id,
					venue_id: this.userInfo.occupation_changguan_id,
					applet_id: this.userInfo.occupation_xcx_id,
					base_address: this.base_address,
					remark: this.remark,
					head_pic: this.url_phone,
					reg_face:this.reg_face
				};
				let params = {
					row
				};
				let res = await venues.useradd(params);
				if (res.code === 1) {
					uni.$u.toast(res.info);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1 // 返回上一页面，如果页面栈中只有一个页面则该方法不会生效
						});
					}, 1000)
				} else {
					uni.$u.toast(res.info);
				}
			},
			async on_Click() {
				let that = this
				
			console.log(this.reg_face,'rrrr')
				if (!that.username) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if (!that.base_sex) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return
				}
				if (!that.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.occupation_changguan_id) {
					uni.showToast({
						title: '请选择场馆',
						icon: 'none'
					})
					return
				}
				if (!that.userInfo.occupation_xcx_id) {
					uni.showToast({
						title: '请选择小程序',
						icon: 'none'
					})
					return
				}
				let row = {
					username: this.username,
					base_sex: this.base_sex,
					phone: this.phone,
					card_num: this.card_num,
					base_birthday: this.userInfo.datatime,
					vip_id: this.userInfo.occupation_jineng_id,
					venue_id: this.userInfo.occupation_changguan_id,
					applet_id: this.userInfo.occupation_xcx_id,
					base_address: this.base_address,
					remark: this.remark,
					head_pic: this.url_phone,
					old_venue: this.old_venue,
					reg_face:this.reg_face
				};
				let params = {
					row,
					ids: this.id
				};
				let res = await venues.useredit(params);
				if (res.code === 1) {
					uni.$u.toast(res.info);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1 // 返回上一页面，如果页面栈中只有一个页面则该方法不会生效
						});
					}, 1000)
				} else {
					uni.$u.toast(res.info);
				}
			},
			shuju() {
				this.occupation_status.push(
					this.occupation_list
				)
				this.jineng_status.push(
					this.jineng_list
				)
				this.changguan_status.push(
					this.changguan_list
				)
				this.xcx_status.push(
					this.xcx_list
				)
			},
			// 职业
			addoccupation(e) {
				this.userInfo.occupation_relation = e.value[0].name
				this.userInfo.occupation_relation_id = e.value[0].id
				this.showoccupation = false
			},
			addjineng(e) {
				this.userInfo.occupation_jineng = e.value[0].name
				this.userInfo.occupation_jineng_id = e.value[0].id
				this.showjineng = false
			},
			addchangguan(e) {
				this.userInfo.occupation_changguan = e.value[0].venue_name
				this.userInfo.occupation_changguan_id = e.value[0].id
				this.showchangguan = false
			},
			addxcx(e) {
				this.userInfo.occupation_xcx = e.value[0].name
				this.userInfo.occupation_xcx_id = e.value[0].id
				this.showxcx = false
			},
			groupChange(n) {
				this.base_sex = n
			},
			timelist(value) {
				this.show = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				this.userInfo.datatime = y + '-' + MM + '-' + d
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test',
							project_id: getApp().globalData.projectId,
							app_id: this.$https.weixinAppId,

						},
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_phone = result.data.url
							setTimeout(() => {
								resolve(this.url_phone)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		// height: 100vh;
		// background-color: #EDF5F5;

		.group_3 {
			background-color: rgba(255, 255, 255, 1.000000);
			width: 710rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin: 20rpx 0 0 20rpx;

			/deep/.u-cell-group {
				background-color: #fff;
				flex-grow: 0;

				.u-cell-group__wrapper>.u-line {
					display: none;
				}

				.u-cell__body {
					padding: 0 18rpx 0 32rpx;
					height: 110rpx;
				}

				.u-cell__title {
					color: #333;
					font-size: 32rpx !important;
					font-weight: 500;

					&.required {
						&::before {
							content: '*';
							color: #fb2222;
						}
					}
				}

				.u-cell__value {
					color: #999;
				}
			}

			.ul {
				width: 92%;
				height: 110rpx;
				margin: auto;
			}

			.li {
				width: 100%;
				height: 110rpx;
				line-height: 110rpx;
				display: flex;
				justify-content: space-between;
			}


			.li .left {
				font-size: 32rpx;
				color: #333;
				text-align: left;
			}


			.catname {
				color: #999;
				margin-left: 10rpx;
				margin-top: 40rpx;
				font-size: 26rpx;
			}

			.catnames {
				color: #999 !important;
				font-size: 26rpx;
			}

			input {
				text-align: right;
			}

			.line {
				width: 100%;
				height: 1rpx;
				background-color: #e6e6e6
			}

			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 25rpx 30rpx 20rpx 30rpx;

				.atinput {
					// border: #EBECEE 1rpx solid;
					font-size: 24rpx;
					height: 60rpx;
					width: 600rpx;
					padding-left: 20rpx;
				}

				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					grid-gap: 20rpx;
					position: relative;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.000000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.100000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: fixed;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}
	}
</style>